<template>
<!-- 书籍目录页 -->
    <div>
        <Header :Title="title" :Type='type'></Header>
        <div class="head">共{{totalChapter}}章</div>
        <div 
            class="item"
            v-for="(i,j) in chapterList"
            :key="j"
            @click="goBooKRead(id,i.label)">
                {{i.title}}
            <div
                class="mask" 
                v-if="j>29"
                @click.stop
                @click="BookListShowPopup">
                    <van-icon name="cart-o" size='24'/>
            </div>
        </div>
        <BottomPop :ShowPop='BookListShow' @ChangeShowPop='BookListShowPopup'></BottomPop>
    </div>
</template>
<script>
import Header from '@/components/Header.vue'
import BottomPop from '@/components/BottomPop.vue'
export default {
    name:'BookCatalog',
    components:{
        Header,
        BottomPop
    },
    data(){
        return {
            title:'快读小说',
            type:3,
            totalChapter:0,
            chapterList:[],
            // 弹出用
            id:0,
            BookListShow:false
        }
    },
    mounted(){
        this.$api.Preflight().then(res=>{
            this.getChapter()
        }).catch((()=>{
            console.log('请求出错')
        }))
        this.id=this.$route.params.id
    },
    methods:{
        async getChapter(){
            let params={
                id:this.$route.params.id
            }
            let res=await this.$api.getChapter(params)
            // .then(res=>{
            //     if(res.errorno == 200){
            //         this.totalChapter=res.data.length
            //         this.chapterList=res.data
            //         console.log(res)
            //     }
            // }).catch()
            if(res.errorno == 200){
                this.totalChapter=res.data.length
                this.chapterList=res.data
                console.log(res)
            }
        },
        BookListShowPopup(){
            this.BookListShow=!this.BookListShow
        },
        goBooKRead(v,j){
          this.$router.push({
            name:'BookRead',
            params:{
              id:v,
              label:j
            }
          })
        }
    }
}
</script>
<style lang="stylus" scoped>
.head,.item
    height 1rem
    line-height 1rem
    background-color #fff
    font-size .34rem
    padding-left .2rem
.van-popup
    background-color #eee
.item
    font-size .28rem
    color #999
    position relative
    .mask
        position absolute
        top 0
        left 0
        width 100%
        height 100%
        .van-icon
            position absolute
            right .4rem
            top .2rem
.Popbtn
    text-align center
    height 45%
    color #222
    font-size .36rem
    line-height 1rem
    background-color #fff
    &:last-child
        margin-top .2rem
</style>